<template>
  <div class="student-body">
        <h2 class="box_tit">
            <i class="icon icon1"></i>作业管理
            <i class="reti"></i>
        </h2>
        <!-- <div class="blank20"></div> -->
        <div class="components_searchs clearfix" @keyup.enter="onSubmit">
          <el-form :inline="true" :model="queryFormData" class="demo-form-inline" ref="from" label-width="60px">
              <el-form-item label="作业名称：" label-width="80px">
                  <el-input v-model="queryFormData.title" placeholder="请输入作业名称" clearable></el-input>
              </el-form-item>
              <el-form-item label="学期：">
                  <el-select v-model="queryFormData.semester" clearable placeholder="请选择学期">
                          <el-option v-for="semester in semesterList" :key="semester.value" :label="semester.name" :value="semester.value"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="类型：">
                  <el-select v-model="queryFormData.type" clearable placeholder="请选择类型" >
                          <el-option v-for="type in typeList" :key="type.id" :label="type.text" :value="type.id"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item>
                  <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button size="mini" type="primary" icon="el-icon-refresh" @click="resertSearch">重置</el-button>
              </el-form-item>
              <el-form-item>
                  <el-button size="mini" type="primary" icon="el-icon-view"
                                              @click="advancedSearchState=!advancedSearchState">高级搜索</el-button>
              </el-form-item>
          </el-form>
        </div>
        <div  v-if="advancedSearchState" class="components_searchs clearfix" @keyup.enter="onSubmit">
              <el-form class="demo-form-inline" label-width="80px">
                  <el-form-item label="状态：">
                      <el-select v-model="queryFormData.status" clearable placeholder="请选择状态">
                              <el-option v-for="status in statusList" :key="status.id" :label="status.text" :value="status.id"></el-option>
                      </el-select>
                  </el-form-item>
              </el-form>
        </div>
            <div class="components_btns clearfix" v-has:table="'homework:add'">
              <a href="javascript:void(0);" class="btns add"  @click="showAddHomeworkDialog()">添加作业</a>
            </div>
        <div class="scrollBarX">
                <vue-table
                      :api-url="homeworkTable.apiUrl"
                      :fields="homeworkTable.fields"
                      :appendParams="queryFormData"
                      :content="self"
                      ref="homeworkTable">
                </vue-table>
        </div>
        <homework-add ref="homeworkAdd"></homework-add>
        <homework-edit ref="homeworkEdit"></homework-edit>
        <!-- <teach-support-edit ref="teachSupportEdit"></teach-support-edit>
        <teach-support-detail ref="teachSupportDetail"></teach-support-detail> -->
  </div>
</template>
<script>
    import {enums} from '@/constant'
    import moment from 'moment'
    import homework_add from './homework-add'
    import homework_edit from './homework-edit'
    export default{
      components:{
        "homework-add":homework_add,
        "homework-edit":homework_edit
      },
        data(){
            return {
                self:this,
                advancedSearchState: false,
                queryFormData:{
                  title:null,
                  semester:null,
                  type:null,
                  status:null
                },
                semesterList:[],
                typeList:enums.HOMEWORK_TYPE,
                statusList:enums.HOMEWORK_STATUS,
                homeworkTable: {
                    apiUrl: api.homeworkTeacher.queryTeacherHomework,
                    fields: [{
                            prop: "title",
                            label: "作业名称",
                        },
                        {
                            prop: "courseName",
                            label: "所属课程",
                        },
                        {
                            prop: "semester",
                            label: "学期",
                        },
                        {
                            prop: "type",
                            label: "类型",
                            formatter:function(row, column, cellValue){
                                return cellValue== 0?"电子":"纸质";
                            },
                            width:80
                        },
                        {
                            prop: "startTime",
                            label: "开始时间",
                            formatter : function(row, column, cellValue){
                                  return moment(cellValue).format('YYYY-MM-DD HH:mm');
                              }
                        },
                        {
                            prop: "endTime",
                            label: "结束时间",
                            formatter : function(row, column, cellValue){
                                  return moment(cellValue).format('YYYY-MM-DD HH:mm');
                              }
                        },
                        {
                            prop: "status",
                            label: "状态",
                            formatter:function(row, column, cellValue){
                                return cellValue== 0?"未开启":cellValue==1?"进行中":"已结束";
                            },
                            width:100
                        },
                        {
                            prop:"proportion",
                            label: "占比",
                            formatter:function(row, column, cellValue){
                                return cellValue+"%";
                            },
                            width:80
                        },
                        {
                            prop: "__component",
                            label: "操作",
                            componentName:"homeworkSupport"
                        },
                    ],
                },
            }
        },
        created(){
          this.getSemesterList();
        },
        methods:{
            showAddHomeworkDialog(){
                this.$refs.homeworkAdd.showDialog();
            },
            showDialogHomeworkEdit(row){
              this.$refs.homeworkEdit.showDialog(row.id);
            },
            onSubmit(){
                this.$refs.homeworkTable.$emit('vuetable:refresh')
            },
            resertSearch(){
              let self = this;
              self.queryFormData.title = null;
              self.queryFormData.semester = null;
              self.queryFormData.type = null;
              self.queryFormData.status = null;
              this.$refs.homeworkTable.$emit('vuetable:refresh')
            },
            getSemesterList(){
                let self = this;
                this.getDictsQueryByType("semester_type",
                  (response)=>{
                    self.semesterList = JSON.parse(JSON.stringify(response.data.data));
                  });
            },
            getDictsQueryByType(type,success){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl,{
                    params: {
                        type: type
                    }
                }).then((response) => {
                    success(response);
                });
            },
        }
    }


</script>
<style scoped>
.student-body {
  min-height: 545px;
  width: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 15px;
}
.student-body .contents span {
  display: inline-block;
  width: 100px;
  margin-top: 10px;
  text-align: right;
}
.student-body .contents .spanInput {
  height: 26px;
  width: 206px;
  line-height: 26px;
  font-size: 12px;
  color: #cdcdcd;
  text-indent: 5px;
  border-radius: 15px;
  border: 1px solid #cdcdcd;
  box-sizing: border-box;
  outline: none;
}

.student-body .contents .sexSpan {
  width: 20px;
  padding-left: 20px;
}
.student-body .contents .sexSpans{
  width: 50px;
}
.student-body .contents .lableInput {
  position: absolute;
  top: 12px;
  left: 105px;
}
.student-body .contents
.student-body .reti {
  width: 94px;
}
.student-body .inputs {
  width: 100%;
  height: 40px;
  padding-top: 20px;
}
.student-body .inputs > span {
  font-size: 12px;
  color: #333;
  padding-left: 1px;
}

.box_tit {
  border-bottom: 1px solid #e6e8ec;
  position: relative;
  padding: 4px 0 10px 30px;
  margin-top: 0;
  font-weight: bold;
  line-height: 16px;
}
</style>

